<template>
  <div class="radioDetails w">
    <div
      class="main"
      v-if="Object.keys(details).length !== 0 && programs.length != 0"
    >
      <el-row type="flex">
        <el-col :span="6">
          <GlobalImageDeep
            :url="details.picUrl"
            :imgWidth="250"
            :imgHeight="250"
          />
        </el-col>
        <el-col :span="18">
          <div class="name">
            <i></i>
            <p>{{ details.name }}</p>
          </div>
          <div class="author">
            <GlobalImageDeep
              :url="details.dj.avatarUrl"
              :imgWidth="35"
              :imgHeight="35"
            />
            <el-link
              type="primary"
              @click="toUserDetailsPage(details.dj.userId)"
              >{{ details.dj.nickname }}</el-link
            >
          </div>
          <div class="count">
            播放 : {{ getCount(details.playCount) }}次 &nbsp; 节目数量 :
            {{ getCount(details.programCount) }}
          </div>
          <div class="btn">
            <el-button type="success">
              <i class="iconfont icon-bofang"></i>
              播放全部
            </el-button>
            <el-button>
              <i class="iconfont icon-tianjia"></i>
              订阅 ({{ getCount(details.subCount) }})
            </el-button>
            <el-button>
              <i class="iconfont icon-fenxiang"></i>
              分享 ({{ getCount(details.shareCount) }})
            </el-button>
            <el-button>
              <i class="iconfont icon-fenxiang"></i>
              评论 ({{ getCount(details.commentCount) }})
            </el-button>
          </div>
          <div class="desc">
            <i>{{ details.category }}</i> {{ details.desc }}
          </div>
        </el-col>
      </el-row>

      <!-- 节目列表 -->
      <el-table :data="programs" stripe>
        <!-- <el-table-column type="expand"> </el-table-column> -->
        <el-table-column type="index" align="center" width="50px">
        </el-table-column>
        <el-table-column label="名字" align="left">
          <template scope="{row}">
            <span class="table_name" @click="toRadioPlayerPage(row)">
              {{ row.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="播放次数" align="center">
          <template scope="{row}">
            <div>播放 {{ getCount(row.listenerCount) }} 次</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template scope="{row}">
            {{ formatCreateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="时长" align="center">
          <template scope="{row}">
            {{ formatDt(row.duration) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="queryInfo.limit"
          @current-change="paginationCurrentChange"
        >
        </el-pagination>
      </el-row>
    </div>
    <el-empty v-else description="正在加载请稍等~~~"></el-empty>
  </div>
</template>

<script>
import moment from "moment";
import { getCount } from "../../../../utils/format";
import { getRadioDetails, getRadioProgram } from "../../../../api/radioApi";
export default {
  name: "radioDetails",
  components: {},
  data() {
    return {
      details: {},
      programs: [],
      total: 0,
      currentPage: 1,
      queryInfo: {
        limit: 10,
        offset: 0,
        asc: false,
        rid: this.$route.params.id,
      },
    };
  },
  created() {
    this.getRadioDetails();
    this.getRadioProgram();
  },
  watch: {
    "$route.params.id": {
      handler(newValue) {
        // this.getRadioProgram();
        this.queryInfo = {
          rid: newValue,
          offset: 0,
          limit: 10,
        };
        this.total = 0;
        this.currentPage = 1;
        this.getRadioProgram();
      },
    },
  },
  methods: {
    getCount,
    formatCreateTime(time) {
      return moment(time).format("YYYY-MM-DD");
    },
    formatDt(time) {
      return moment(time).format("mm:ss");
    },
    async getRadioDetails() {
      try {
        let result = await getRadioDetails(this.$route.params.id);
        if (result.code === 200) {
          this.details = result.data;
        }
      } catch (error) {}
    },
    async getRadioProgram() {
      try {
        let result = await getRadioProgram(this.queryInfo);
        if (result.code === 200) {
          this.programs = result.programs;
          this.total = result.count;
        }
      } catch (error) {}
    },
    paginationCurrentChange(newPage) {
      this.currentPage = newPage;
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit;
      this.getRadioProgram();
    },
    toUserDetailsPage(id) {
      console.log(id);
      this.$router.push(`/userDetails/${id}`);
    },
    toRadioPlayerPage(item) {
      // { mainTrackId, coverUrl }
      let link = this.$router.resolve({
        path: `/radioPlayer/${item.mainTrackId}/${item.id}`, //要跳转的路由
      });
      window.open(link.href, "radioPlayer"); //打开新窗口
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.radioDetails {
  /deep/ .el-pager li.active {
    color: #fff;
    background: @globalColor;
    border-radius: 50%;
    &:hover {
      color: #fff;
    }
  }
  /deep/ .el-pager li:hover {
    color: @globalColor;
  }
  padding: 30px 0;
  font-size: 14px;
  color: #333333;
  .main {
    .name {
      display: flex;
      align-items: center;
      i {
        width: 55px;
        height: 24px;

        background: url("../../../../assets/images/icon.png") no-repeat 0 9999px;
        background-position: 0 -1014px;
      }
      p {
        margin-left: 10px;
        font-size: 20px;
      }
    }
    .author {
      display: flex;
      align-items: center;
      margin: 10px 0;
      /deep/ .el-link {
        height: 21px;
        margin-left: 10px;
      }
    }
    .count {
      margin-bottom: 10px;
      color: #999999;
    }
    .desc {
      margin-top: 10px;
      font-size: 12px;
      color: #999999;
      i {
        display: inline-block;
        border: 1px solid @globalColor;
        color: @globalColor;
        padding: 1px 3px;
      }
    }
    .table_name {
      cursor: pointer;
      &:hover {
        color: @globalColor;
      }
    }
    .row-bg {
      margin-top: 20px;
    }
  }
}
</style>
